import { mapState, mapActions } from 'vuex'

import DtScene from '@/components/dt-scene/index.vue'
import LeftDrawer from './drawer/left.vue'
import RightDrawer from './drawer/right.vue'
import BottomDrawer from './drawer/bottom.vue'

export default {
  components: {
    DtScene,
    LeftDrawer,
    RightDrawer,
    BottomDrawer
  },
  computed: {
    ...mapState({
      leftVisible: state => state.drawer.leftVisible,
      rightVisible: state => state.drawer.rightVisible,
      bottomVisible: state => state.drawer.bottomVisible
    })
  },
  mounted() {
    this.setleftvisible(false)
    this.setrightvisible(false)
    this.setbottomvisible(false)
    // 监听excel上传后，调用渲染的方法
    this.$bus.$on('renderPoint', async (pointData = [], flag) => {
      // 先置空后，再去加载，没有做非空处理，直接清除，做显示控制按钮
      if (flag && pointData.length > 0) {
        this.$refs.ballExample.createPolyline(pointData)
      } else {
        await this.$refs.ballExample.clearPolyline()
      }
    })
  },
  methods: {
    ...mapActions({
      setleftvisible: 'drawer/setleftvisible',
      setrightvisible: 'drawer/setrightvisible',
      setbottomvisible: 'drawer/setbottomvisible'
    }),

    handleOpenLeft() {
      this.$refs.left.visiable = !this.$refs.left.visiable
      this.$refs.left.clearFields()
      this.setleftvisible(this.$refs.left.visiable)
    },

    handleOpenRight() {
      this.$refs.right.visiable = !this.$refs.right.visiable
      this.setrightvisible(this.$refs.right.visiable)
    },
    handleOpenBottom() {
      this.$refs.bottom.visiable = !this.$refs.bottom.visiable
      this.setbottomvisible(this.$refs.bottom.visiable)
    }
  }
}
